<!-- 这是一个多选题库表格-->
<template>
  <div>
    <el-row v-show="showParams">
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item label="编码" prop="code">
              <el-input v-model="params.code" clearable style="width: 200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="大纲" prop="syllabusCode">
              <el-select v-model="params.syllabusCode" style="width: 200px">
                <el-option
                  v-for="dict in dict.type.syllabus"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="考题类型" prop="questionType">
              <el-select v-model="params.questionType" clearable style="width: 200px">
                <el-option
                  v-for="item in options.QUESTION_TYPE.list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="题干内容" prop="content">
              <el-input v-model="params.content" clearable style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="line-height: 33px;">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-table
      ref="table"
      :data="data"
      @selection-change="handleSelectionChange"
      row-key="questionId"
      v-loading="loading"
      @row-click="handleRowClick"
    >
      <el-table-column resizable show-overflow-tooltip type="selection" width="55" align="center"/>
      <el-table-column resizable show-overflow-tooltip type="index"></el-table-column>
      <el-table-column resizable show-overflow-tooltip label="考题编码" align="center" prop="code"/>
      <el-table-column resizable show-overflow-tooltip label="部门" align="center" prop="deptId">
        <template v-slot="{row}">
          {{ row.deptId | deptFilter }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="大纲" align="center" prop="syllabusCode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.syllabus" :value="scope.row.syllabusCode"/>
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="岗位" align="center" prop="postId">
        <template slot-scope="{row}">
          {{ row.postId | postFilter }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="科目" align="center" prop="subjectName"/>
      <el-table-column resizable show-overflow-tooltip label="知识点" align="center" prop="knowledgePointsName"/>
      <el-table-column resizable show-overflow-tooltip label="考题类型" align="center" prop="questionType">
        <template v-slot="{row}">
          {{ options.QUESTION_TYPE.map[row.questionType] }}
        </template>
      </el-table-column>
      <el-table-column resizable show-overflow-tooltip label="题干内容" align="center" prop="content"/>
      <el-table-column resizable show-overflow-tooltip label="能力级别" align="center" prop="postLevelCode">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.post_level" :value="scope.row.postLevelCode"/>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right; margin-top: 20px; padding-right: 20px">
      <el-button
        size="mini"
        type="primary"
        @click="handleConfirm"
      >确认
      </el-button>
      <el-button
        size="mini"
        type="danger"
        @click="handleCancel"
      >取消

      </el-button>
    </div>
  </div>
</template>

<script>
import {listExamQuestionBank} from '@/api/train/base/ExamQuestionBank'
import {QUESTION_TYPE} from '@/views/train/Enums.js'
import mixins from "@/views/train/mixins";
export default {
  dicts: ['syllabus', 'post_level'],
  mixins: [mixins],
  props: {
    // 是否带查询条件
    showParams: {
      required: false,
      type: Boolean,
      default: false,
    },
    // 默认查询参数
    defaultParams: {
      required: false,
      validate(params) {
        return Object.prototype.toString.call(params) === '[object Object]'
      }
    },
    // 默认勾选的数据
    defaultSelectedIds: {
      required: false,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 表格数据
      data: [],
      // 查询条件
      params: {
        questionType: '',
        syllabusCode: '',
        code: '',
        content: '',
      },
      // 选中的数据
      selectedData: [],
      loading: false,
      options: {
        QUESTION_TYPE
      }
    }
  },
  methods: {
    init() {
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      listExamQuestionBank({...this.params, ...this.defaultParams}).then(({rows}) => {
        rows.forEach(e => {
          e.questionId = e.id
          delete (e.id)
        })
        this.data = rows
        this.$refs.table.clearSelection()
        if (Array.isArray(this.defaultSelectedIds) && this.defaultSelectedIds.length) {
          let selectedRows = this.data.filter(e => ~this.defaultSelectedIds.indexOf(e.questionId))
          this.$nextTick(() => {
            selectedRows.forEach(row => {
              this.$refs.table.toggleRowSelection(row)
            })
          })
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleReset() {
      this.params = {
        questionType: '',
        syllabusCode: '',
        code: '',
        content: '',
      }
      this.handleQuery()
    },
    // 表格选中项变化事件
    handleSelectionChange(val) {
      this.selectedData = val
    },
    // 行点击
    handleRowClick(row) {
      // 选中/取消该行
      this.$refs.table.toggleRowSelection(row)
    },
    // 确认按钮事件
    handleConfirm() {
      this.$emit('handleConfirm', this.selectedData)
    },
    // 取消按钮事件
    handleCancel() {
      this.$emit('handleCancel')
    }
  },
  mounted() {
  },
}
</script>

<style scoped>

</style>
